/*
 *封装选项卡函数
 * menuClassName  : 选项卡菜单的类选择器
 * textClassName  : 选项卡内容的类选择器 
 */
// 注意tab.js只能给需要点击的头部添加tab-active激活样式
// 给要显示的页面添加on激活样式
function tabCard(menuClassName, textClassName) {
    // 这里形参menuClassName, textClassName是变量,获取不加''
    let menu = document.querySelectorAll(menuClassName)
    let text = document.querySelectorAll(textClassName)
        // console.log(menu);
        // console.log(text);

    // 定义变量保存上一个菜单的索引
    let index = 0
    menu.forEach(function(v, i) {
        v.addEventListener('click', function() {
            console.log(1);
            // 先清除上一个菜单的激活样式
            menu[index].classList.remove('tab-active')
                // menu[index].className = ''

            //给当前添加激活样式
            this.classList.add('tab-active')
                // this.className = 'tab-active'

            //先隐藏其他内容
            // 这里不能直接用className覆盖类名
            // 应该用classlist添加类名
            // text[index].classList = ''

            // //显示当前菜单对应的内容
            // text[i].className = 'on'
            text[index].classList.remove('on')

            //显示当前菜单对应的内容
            text[i].classList.add('on')

            //江当前菜单的索引赋值给index
            index = i

        })
    })
}